<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥镇数字乡村可视化大屏</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <header>
      <h1>蓝桥镇数字乡村可视化大屏</h1>
    </header>
    <!-- 页面主体 -->
    <section id="app" class="mainBox">
      <div class="column">
        <div class="panel bar">
          <h2>蓝桥镇产业就业情况</h2>
          <div class="chart">图表</div>
          <div class="panel-footer"></div>
        </div> 
      </div>
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>{{humman}}</li>
              <li>{{gdp}}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>蓝桥镇目前人口</li>
              <li>目前GDP (万元)</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="earth"></div>
          <div class="route"></div>
          <div class="broute"></div>
          <div class="chart"></div>
        </div>
      </div>
      <div class="column">
        <div class="panel line2">
          <h2>进出口订单量</h2>
          <div class="chart">图表</div>
          <div class="panel-footer"></div>
        </div> 
      </div>
    </section>
  </body>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/china.js"></script>
  <script src="js/vue.min.js"></script>
  <script src="js/axios.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      mounted() {
        this.showChartBar();
        this.showCharline();
        this.showChinaMap();
        this.showNumber();
      },
      data: {
        humman: 0,
        gdp:0
      },
      methods: {
        showNumber() {
            axios.get("./json/number.json").then((res) => {
                this.humman = res.data.data.humman
                this.gdp = res.data.data.gdp
            });
        }, 
        showCharline() {
          const myChart = echarts.init(document.querySelector(".line2 .chart"));
          axios.get("./json/line.json").then((res) => {
            let data = res.data.data;
            console.log(data);
            const option = {
              tooltip: {
                trigger: "axis",
              },
              legend: {
                top: "0%",
                textStyle: {
                  color: "rgba(255,255,255,.5)",
                  fontSize: "12",
                },
              },
              grid: {
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true,
              },
              xAxis: [
                {
                  type: "category",
                  axisLabel: {
                    textStyle: {
                      color: "rgba(255,255,255,.6)",
                      fontSize: 12,
                    },
                  },
                  axisLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,.2)",
                    },
                  },
                  boundaryGap: false,
                  data: data.xAxisData,
                },
              ],
              yAxis: [
                {
                  type: "value",
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    textStyle: {
                      color: "rgba(255,255,255,.6)",
                      fontSize: 12,
                    },
                  },
                  axisLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,.1)",
                    },
                  },
                  splitLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,.1)",
                    },
                  },
                },
              ],
              series: [
                {
                  name: "进口量",
                  type: "line",
                  smooth: true,
                  // 单独修改当前线条的样式
                  lineStyle: {
                    color: "#0184d5",
                    width: "2",
                  },
                  // 填充颜色设置
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                        },
                        {
                          offset: 0.8,
                          color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                        },
                      ],
                      false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                  },
                  // 设置拐点
                  symbol: "circle",
                  // 拐点大小
                  symbolSize: 8,
                  // 开始不显示拐点， 鼠标经过显示
                  showSymbol: false,
                  // 设置拐点颜色以及边框
                  itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12,
                  },
                  data: data.seriesData1,
                },
                {
                  name: "出口量",
                  type: "line",
                  smooth: true,
                  lineStyle: {
                    normal: {
                      color: "#00d887",
                      width: 2,
                    },
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)",
                          },
                          {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)",
                          },
                        ],
                        false
                      ),
                      shadowColor: "rgba(0, 0, 0, 0.1)",
                    },
                  },
                  // 设置拐点 小圆点
                  symbol: "circle",
                  // 拐点大小
                  symbolSize: 5,
                  // 设置拐点颜色以及边框
                  itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12,
                  },
                  // 开始不显示拐点， 鼠标经过显示
                  showSymbol: false,
                  data: data.seriesData2,
                },
              ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
              myChart.resize();
            });
          });
        },
        showChartBar() {
          const myChart = echarts.init(document.querySelector(".bar .chart"));
          axios.get("./json/bar.json").then((res) => {
            let data = res.data.data;
            console.log(data);
            // 指定配置和数据
            const option = {
              color: ["#2f89cf"],
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true,
              },
              xAxis: [
                {
                  type: "category",
                  data: data.xAxisData,
                  axisTick: {
                    alignWithLabel: true,
                  },
                  axisLabel: {
                    textStyle: {
                      color: "rgba(255,255,255,.6)",
                      fontSize: "12",
                    },
                  },
                  axisLine: {
                    show: false,
                  },
                },
              ],
              yAxis: [
                {
                  type: "value",
                  axisLabel: {
                    textStyle: {
                      color: "rgba(255,255,255,.6)",
                      fontSize: "12",
                    },
                  },
                  axisLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,.1)",
                      width: 2,
                    },
                  },
                  splitLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,.1)",
                    },
                  },
                },
              ],
              series: [
                {
                  name: "就业人数",
                  type: "bar",
                  barWidth: "35%",
                  data: data.seriesData,
                  itemStyle: {
                    barBorderRadius: 5,
                  },
                },
              ],
            };
            // 把配置给实例对象
            myChart.setOption(option);
            // 根据浏览器大小切换图表尺寸
            window.addEventListener("resize", function () {
              myChart.resize();
            });
          });
        },
      
      showChinaMap() {
            const myChart = echarts.init(document.querySelector(".map .chart")); 
            const convertData = function(data) {
                const res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i]; 
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                    value: dataItem[1].value
                });
                }
            }
            return res;
            };
        
            const color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
            const series = [];
            [
            ["西安", XAData],
            ["西宁", XNData],
            ["银川", YCData]
            ].forEach(function(item, i) {
            series.push(
                {
                name: item[0] + " Top3",
                type: "lines",
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: "red", //arrow箭头的颜色
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2
                    }
                },
                data: convertData(item[1])
                },
                {
                name: item[0] + " Top3",
                type: "lines",
                zlevel: 2,
                symbol: ["none", "arrow"],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                    }
                },
                data: convertData(item[1])
                },
                {
                name: item[0] + " Top3",
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                    brushType: "stroke"
                },
                label: {
                    normal: {
                    show: true,
                    position: "right",
                    formatter: "{b}"
                    }
                },
                symbolSize: function(val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                    color: color[i]
                    },
                    emphasis: {
                    areaColor: "#2B91B7"
                    }
                },
                data: item[1].map(function(dataItem) {
                    return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
                }
            );
            });
            const option = {
            tooltip: {
                trigger: "item",
                formatter: function(params, ticket, callback) {
                if (params.seriesType == "effectScatter") {
                    return "线路：" + params.data.name + "" + params.data.value[2];
                } else if (params.seriesType == "lines") {
                    return (
                    params.data.fromName +
                    ">" +
                    params.data.toName +
                    "<br />" +
                    params.data.value
                    );
                } else {
                    return params.name;
                }
                }
            },
            legend: {
                orient: "vertical",
                top: "bottom",
                left: "right",
                data: ["西安 Top3", "西宁 Top3", "银川 Top3"],
                textStyle: {
                color: "#fff"
                },
                selectedMode: "multiple"
            },
            geo: {
                map: "china",
                label: {
                emphasis: {
                    show: true,
                    color: "#fff"
                }
                },
                // 把中国地图放大了1.2倍
                zoom: 1.2,
                roam: true,
                itemStyle: {
                normal: {
                    // 地图省份的背景颜色
                    areaColor: "rgba(20, 41, 87,0.6)",
                    borderColor: "#195BB9",
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: "#2B91B7"
                }
                }
            },
            series: series
            };
            myChart.setOption(option);
            // 监听浏览器缩放，图表对象调用缩放resize函数
            window.addEventListener("resize", function() {
            myChart.resize();
            });
            
        }
        },
    });
  </script>
</html>
